<template>
  <div class="editor-example-container">
    <div class="page-header">
      <h2>富文本编辑器示例</h2>
      <p>本页面展示了富文本编辑器的各种功能和配置</p>
    </div>

    <!-- 基础富文本编辑器 -->
    <el-card class="editor-card">
      <template #header>
        <div class="card-header">
          <h3>基础富文本编辑器</h3>
          <el-tag type="primary">基础功能</el-tag>
        </div>
      </template>

      <div class="editor-toolbar">
        <el-button-group>
          <el-button type="default" @click="execCommand('bold')" :class="{ active: isBold }">
            <el-icon><b>B</b></el-icon>
          </el-button>
          <el-button type="default" @click="execCommand('italic')" :class="{ active: isItalic }">
            <el-icon><i>I</i></el-icon>
          </el-button>
          <el-button type="default" @click="execCommand('underline')" :class="{ active: isUnderline }">
            <el-icon><u>U</u></el-icon>
          </el-button>
          <el-button type="default" @click="execCommand('strikeThrough')" :class="{ active: isStrikeThrough }">
            <el-icon><span style="text-decoration: line-through;">S</span></el-icon>
          </el-button>
        </el-button-group>

        <el-divider direction="vertical" />

        <el-button-group>
          <el-button type="default" @click="execCommand('justifyLeft')">
            <el-icon><align-left /></el-icon>
          </el-button>
          <el-button type="default" @click="execCommand('justifyCenter')">
            <el-icon><align-center /></el-icon>
          </el-button>
          <el-button type="default" @click="execCommand('justifyRight')">
            <el-icon><align-right /></el-icon>
          </el-button>
          <el-button type="default" @click="execCommand('justifyFull')">
            <el-icon><position /></el-icon>
          </el-button>
        </el-button-group>

        <el-divider direction="vertical" />

        <el-button-group>
          <el-button type="default" @click="execCommand('insertOrderedList')">
            <el-icon><list /></el-icon>
          </el-button>
          <el-button type="default" @click="execCommand('insertUnorderedList')">
            <el-icon><tickets /></el-icon>
          </el-button>
        </el-button-group>

        <el-divider direction="vertical" />

        <el-dropdown @command="handleFontSizeChange">
          <el-button type="default">
            字号<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">小</el-dropdown-item>
              <el-dropdown-item command="3">正常</el-dropdown-item>
              <el-dropdown-item command="5">大</el-dropdown-item>
              <el-dropdown-item command="7">超大</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-color-picker v-model="fontColor" size="small" show-alpha @change="handleColorChange" />
      </div>

      <div 
        class="editor-content" 
        contenteditable="true" 
        ref="editorRef"
        @input="handleInput"
        @mouseup="checkStyles"
        @keyup="checkStyles"
      ></div>

      <div class="editor-footer">
        <div class="word-count">
          字数: {{ wordCount }}
        </div>
        <div class="editor-actions">
          <el-button type="primary" @click="saveContent">保存内容</el-button>
          <el-button type="danger" @click="clearContent">清空内容</el-button>
        </div>
      </div>
    </el-card>

    <!-- 高级编辑器配置 -->
    <el-card class="editor-card">
      <template #header>
        <div class="card-header">
          <h3>高级编辑器配置</h3>
          <el-tag type="success">附加功能</el-tag>
        </div>
      </template>

      <el-alert
        title="提示：在实际项目中，建议使用成熟的富文本编辑器库"
        type="info"
        description="如 TinyMCE、CKEditor、Quill 或 wangEditor 等，它们提供了更完善的功能和更好的兼容性。"
        show-icon
        :closable="false"
        style="margin-bottom: 20px;"
      />

      <div class="advanced-options">
        <el-form label-position="top">
          <el-form-item label="编辑器主题">
            <el-radio-group v-model="editorTheme" @change="applyEditorTheme">
              <el-radio label="light">明亮主题</el-radio>
              <el-radio label="dark">暗黑主题</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="编辑器功能">
            <el-checkbox-group v-model="editorFeatures">
              <el-checkbox label="image">图片上传</el-checkbox>
              <el-checkbox label="table">表格支持</el-checkbox>
              <el-checkbox label="code">代码高亮</el-checkbox>
              <el-checkbox label="link">链接功能</el-checkbox>
              <el-checkbox label="emoji">表情支持</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="编辑器大小">
            <el-slider v-model="editorHeight" :min="200" :max="500" :step="50" show-stops />
          </el-form-item>
        </el-form>
      </div>

      <div class="popular-editors">
        <h4>常用富文本编辑器推荐</h4>
        <el-table :data="editorLibraries" style="width: 100%">
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="description" label="描述" />
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button link type="primary" @click="openEditorUrl(scope.row.url)">
                查看文档
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 保存的内容预览 -->
    <el-card class="editor-card" v-if="savedContent">
      <template #header>
        <div class="card-header">
          <h3>保存的内容预览</h3>
          <el-tag type="warning">HTML 输出</el-tag>
        </div>
      </template>

      <div class="preview-content" v-html="savedContent"></div>

      <el-divider />

      <el-collapse>
        <el-collapse-item title="查看 HTML 源码">
          <pre class="html-code">{{ savedContent }}</pre>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  AlignLeft, AlignCenter, AlignRight, Position, List, Tickets, ArrowDown
} from '@element-plus/icons-vue'

// 编辑器内容和状态
const editorRef = ref(null)
const editorContent = ref('')
const savedContent = ref('')
const wordCount = ref(0)
const fontColor = ref('#333333')

// 文本样式状态
const isBold = ref(false)
const isItalic = ref(false)
const isUnderline = ref(false)
const isStrikeThrough = ref(false)

// 高级编辑器配置
const editorTheme = ref('light')
const editorFeatures = ref(['image', 'link'])
const editorHeight = ref(300)

// 推荐的编辑器库
const editorLibraries = [
  {
    name: 'TinyMCE',
    description: '功能丰富的商业级编辑器，有免费版本',
    url: 'https://www.tiny.cloud/'
  },
  {
    name: 'CKEditor',
    description: '强大的富文本编辑器，支持协作编辑',
    url: 'https://ckeditor.com/'
  },
  {
    name: 'Quill',
    description: '现代化的富文本编辑器，API简洁',
    url: 'https://quilljs.com/'
  },
  {
    name: 'wangEditor',
    description: '国产轻量级富文本编辑器',
    url: 'https://www.wangeditor.com/'
  },
  {
    name: 'Markdown-It',
    description: 'Markdown 编辑器库，适合技术文档',
    url: 'https://github.com/markdown-it/markdown-it'
  }
]

// 执行编辑器命令
const execCommand = (command, value = null) => {
  document.execCommand(command, false, value)
  checkStyles()
  editorRef.value.focus()
}

// 处理字体大小修改
const handleFontSizeChange = (size) => {
  execCommand('fontSize', size)
}

// 处理字体颜色修改
const handleColorChange = (color) => {
  execCommand('foreColor', color)
}

// 检查当前文本样式状态
const checkStyles = () => {
  isBold.value = document.queryCommandState('bold')
  isItalic.value = document.queryCommandState('italic')
  isUnderline.value = document.queryCommandState('underline')
  isStrikeThrough.value = document.queryCommandState('strikeThrough')
}

// 处理编辑器内容变化
const handleInput = (e) => {
  editorContent.value = editorRef.value.innerHTML
  // 计算字数（简单实现，实际可能需要更复杂的计算方式）
  const text = editorRef.value.textContent || ''
  wordCount.value = text.replace(/\s+/g, '').length
}

// 保存内容
const saveContent = () => {
  if (!editorContent.value.trim()) {
    ElMessage.warning('编辑器内容不能为空')
    return
  }
  
  savedContent.value = editorContent.value
  ElMessage.success('内容已保存')
}

// 清空内容
const clearContent = () => {
  editorRef.value.innerHTML = ''
  editorContent.value = ''
  wordCount.value = 0
  ElMessage.info('内容已清空')
}

// 应用编辑器主题
const applyEditorTheme = (theme) => {
  const editorElement = editorRef.value
  if (!editorElement) return
  
  if (theme === 'dark') {
    editorElement.style.backgroundColor = '#333'
    editorElement.style.color = '#fff'
  } else {
    editorElement.style.backgroundColor = '#fff'
    editorElement.style.color = '#333'
  }
  
  ElMessage.success(`已切换到${theme === 'dark' ? '暗黑' : '明亮'}主题`)
}

// 打开编辑器文档链接
const openEditorUrl = (url) => {
  window.open(url, '_blank')
}

// 监听编辑器高度变化
watch(editorHeight, (newHeight) => {
  if (editorRef.value) {
    editorRef.value.style.height = `${newHeight}px`
  }
})

onMounted(() => {
  // 设置初始编辑器高度
  if (editorRef.value) {
    editorRef.value.style.height = `${editorHeight.value}px`
  }
})
</script>

<style scoped>
.editor-example-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 14px;
}

.editor-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
}

.editor-toolbar {
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background-color: #f5f7fa;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.editor-content {
  padding: 15px;
  min-height: 200px;
  border: 1px solid #dcdfe6;
  border-radius: 0 0 4px 4px;
  outline: none;
  overflow-y: auto;
  background-color: #fff;
}

.editor-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.word-count {
  color: #606266;
  font-size: 14px;
}

.editor-actions {
  display: flex;
  gap: 10px;
}

.advanced-options {
  margin-bottom: 20px;
}

.popular-editors {
  margin-top: 20px;
}

.popular-editors h4 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #606266;
}

.preview-content {
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  min-height: 100px;
}

.html-code {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: monospace;
  font-size: 14px;
  overflow-x: auto;
}

:deep(.active) {
  background-color: #ecf5ff;
  color: #409eff;
}
</style> 